<template>
	<a-descriptions size="small" :column="24" v-if="isEnterprise('temp') && props.contractType !== 2">
		<template #title>
			<div class="d-module-title">
				<b>业主信息</b>
			</div>
		</template>
		<a-descriptions-item label="姓名" :span="8">{{ dataSource.name }}</a-descriptions-item>
		<a-descriptions-item label="电话" :span="8">
			<a-space :size="5">
				<span>{{ dataSource.phone }}</span>
			</a-space>
		</a-descriptions-item>
		<a-descriptions-item label="性别" :span="8">
			<span class="">
				{{ !dataSource.gender && dataSource.gender !== 0 ? '-' : sexList[dataSource.gender] }}
			</span>
		</a-descriptions-item>
		<a-descriptions-item label="证件类型" :span="8">{{ CERTIFICATION_TYPE_MAP[dataSource.certificationType] || '身份证' }}</a-descriptions-item>
		<a-descriptions-item label="证件号码" :span="8">{{ dataSource.identityCard }}</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="账号类型" :span="8">{{ paymentType[dataSource.paymentType] || '' }}</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="收付款账号" :span="8">{{ dataSource.paymentNo || '-' }}</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="证件凭证" :span="8">
			<div class="file-upload-container custom">
				<div class="file-preview">
					<a-image
						v-if="dataSource.frontImgUrl"
						style="object-fit: contain"
						:width="100"
						:height="60"
						:src="dataSource.frontImgUrl"
						:preview="{
							src: dataSource.frontImgUrl
						}" />
					<a-image v-if="dataSource.rearImgUrl" :width="100" :height="60" style="object-fit: contain" :src="dataSource.rearImgUrl" :preview="{src: dataSource.rearImgUrl}" />
				</div>
			</div>
		</a-descriptions-item>
	</a-descriptions>




	<a-descriptions v-if="props.contractType !== 2" size="small" :column="24">
		<template #title>
			<div class="d-module-title">
				<b>紧急联系人信息</b>
			</div>
		</template>

		<a-descriptions-item label="姓名" :span="8">{{ dataSource.emergencyName }}</a-descriptions-item>
		<a-descriptions-item label="电话" :span="8">{{ dataSource.emergencyPhone }}</a-descriptions-item>
		<a-descriptions-item label="关系" :span="8">{{ dataSource.emergencyType ? relationshipList.filter((item: any) => item.value == dataSource.emergencyType)[0].label : '' }}</a-descriptions-item>
	</a-descriptions>

	<!-- 编辑紧急联系人 -->
	<addEditEmergencyDialog :id="dataSource.id" :data="{emergencyName: dataSource.emergencyName, emergencyPhone: dataSource.emergencyPhone, emergencyType: dataSource.emergencyType || ''}" v-model:visible="operationList.showAddEditEmergency" @success="emit('success')" />
	<!-- 删除紧急联系人 -->
	<delete-emergency-dialog :id="dataSource.id" v-model:visible="operationList.showDeleteEmergency" @success="emit('success')" />

</template>
<script setup lang="ts">
	import {ref} from 'vue'
	import { relationshipList, sexList} from '@/utils'
	import {CERTIFICATION_TYPE_MAP} from 'yuxin-base/src/constant/index'
	import AddEditEmergencyDialog from '@/components/contract/contract-detail-dialog/add-editEmergency-dialog.vue'
	import {renterContractDeviceDetail} from '@/api/contract'
	import {message} from 'ant-design-vue'
	import {FormOutlined} from '@ant-design/icons-vue'


	const props = defineProps<{
		dataSource: any
		detailInfo: any
		contractId: string | null
		enterRenterInfo?: any
		contractType?: number | string
	}>()

	const paymentType: {
		[key: string | number]: any
	} = {
		1: '银联',
		2: '支付宝',
		3: '微信'
	}

	const emit = defineEmits(['success'])
	const operationList = ref<any>({
		showAddRoommate: false,
		showDeleteRoommate: false,
		showAddEditEmergency: false,
		showDeleteEmergency: false,
		showEditTenantPhone: false,
		showModifyRecord: false
	})
	const isEnterprise = (field: string) => {
		let record = {
			temp: true,
			checkIn: false
		}
		return record[field]
	}

	// 修改紧急联系人
	const editEmergency = () => {
		if ([1, '1', 2, '2'].includes(props.approvalStatus as number)) return message.error('当前合同审批中，暂不允许修改紧急联系人。')
		// if ([2, '2'].includes(props.approvalStatus as number)) return message.error('当前包租合同审批驳回，暂不允许修改紧急联系人。')
		operationList.value.showAddEditEmergency = true
	}


</script>
<style lang="less" scoped>
	.status-box {
		display: flex;
		align-items: center;
		.is-check-in {
			width: 6px;
			height: 6px;
			line-height: 27px;
			border-radius: 50%;
			background: #52c41a;
			margin-right: 8px;
			opacity: 1;
		}
		.check-in {
			width: 6px;
			height: 6px;
			line-height: 27px;
			border-radius: 50%;
			background: #0266ff;
			margin-right: 8px;
			opacity: 1;
		}
	}
	.img-box {
		width: 104px;
		height: 104px;
		padding: 8px;
		display: inline-block;
		margin-right: 16px;
		background: #ffffff;
		border-radius: 2px 2px 2px 2px;
		border: 1px solid rgba(0, 0, 0, 0.15);
		.ant-image {
			height: 100%;
			width: 100%;
			.ant-image-img {
				height: 100%;
			}
		}
	}
	.set-font-normal-size {
		font-size: 13px;
		font-weight: normal;
	}
	.flex1 {
		flex: 1;
	}
</style>
